<template>
  <BasicModal
    v-bind="$attrs"
    wrapClassName="is-absolute"
    :maskStyle="{ position: 'absolute' }"
    @register="expotRegister"
    :width="424"
    :minHeight="100"
    centered
    title="生成对账单"
    @ok="confirmSubmit"
    @cancel="resetModal"
  >
    <!-- <div class="title">生成对账单</div> -->
    <div class="channel">
      <span class="label">选择渠道：</span>
      <a-tree-select
        v-model:value="channel"
        :tree-data="channelTree.treeData"
        show-search
        allowClear
        :field-names="{
          label: 'channelName',
          value: 'channelCode',
          children: 'children'
        }"
        style="width: 320px"
        @change="selectChannel"
        treeNodeFilterProp="channelName"
        placeholder="请选择渠道名称"
        showCheckedStrategy="SHOW_ALL"
      ></a-tree-select>
    </div>
    <div class="datepicker">
      <span class="label">对账区间：</span>
      <a-range-picker
        v-model:value="dateRange"
        style="width: 320px"
        format="YYYY-MM-DD"
        :disabled-date="disabledDate"
      />
    </div>
  </BasicModal>
</template>

<script setup lang="ts" name="exportState">
import { BasicModal, useModalInner } from '@/components/Modal'
import { message } from 'ant-design-vue'
import dayjs, { Dayjs } from 'dayjs'
import { cloneDeep } from 'lodash-es'
import { reactive, ref } from 'vue'
import api from '@/api'
import { downExcel } from '@/utils/axios/request'
const { exportExcel } = api
type RangeValue = [Dayjs, Dayjs]
const emit = defineEmits(['operateSuccess', 'register'])
const channelTree = reactive<any>({
  treeData: []
})
const channel = ref<any>(null)
const channelName = ref('')
const dateRange = ref<RangeValue>()
const [expotRegister, { changeOkLoading, closeModal, setModalProps }] = useModalInner((data) => {
  channelTree.treeData = cloneDeep(data.channelTreeData)
  console.log('渠道数据=====>', channelTree.treeData)
})

const disabledDate = (current: Dayjs) => {
  return current && current > dayjs()
}

const resetModal = () => {
  channel.value = null
  dateRange.value = [] as any
  changeOkLoading(false)
}
const selectChannel = (value: string, label: string) => {
  channelName.value = label
}
const confirmSubmit = async () => {
  try {
    let startDate = ''
    let endDate = ''
    if (!channel.value) {
      message.error('请选择渠道')
      return
    }

    if (dateRange && dateRange.value?.length) {
      startDate = dateRange.value[0].format('YYYY-MM-DD')
      endDate = dateRange.value[1].format('YYYY-MM-DD')
      let diffDays = dayjs(endDate).diff(startDate, 'day') > 365
      if (diffDays) {
        message.error('对账区间不能超过一年')
        return
      }
    } else {
      message.error('请选择对账区间')
      return
    }
    console.log('数据', channel.value, [startDate, endDate])

    changeOkLoading(true)
    await downExcel(
      '/api/tenant/manager/order/checkOrder/exportExcel',
      {
        channelCodeSet: [channel.value],
        beginDate: startDate,
        endDate
      },
      `${channelName.value}_${startDate}~${endDate}_对账单`
    )
    closeModal()
    resetModal()
    message.success('对账单生成成功')
    emit('operateSuccess')
  } catch (error) {
    message.error('对账单生成失败')
    changeOkLoading(false)
  }
}
</script>

<style lang="less" scoped>
.label {
  font-size: 12px;
  font-weight: 600;
}

.channel {
  width: 100%;
  margin-top: 12px;
  margin-bottom: 24px;
}
</style>
